<template>
  <div>
  	<vi-header :header = headerData></vi-header>
  	
  	<div>
  		<div class="tabWarp">
  			<tab class='tab' :line-width=2 active-color='#fc378c' v-model="index">
        	<tab-item class="vux-center" :selected="current === item" v-for="(item, index) in list2" @click="current = item" :key="index">{{item}}</tab-item>
      	</tab>
      </div>
      <swiper v-model="index" :height='sHeight' :show-dots="false">
        <swiper-item v-for="(item, index) in list2" :key="index">
          <div class="tab-swiper vux-center">
          	<!---爆料信息列表-->
          		<div class="discountCon" v-for='item in list'>
          			<img :src="item.src">
						  </div>
          </div>
        </swiper-item>
      </swiper>
    </div>
    
  </div>
</template>

<i18n>
set bar-active-color:
  zh-CN: 设置bar颜色
</i18n>

<script>
	import viHeader from '../viHeader/viHeader'	
	import { Tab, TabItem, Swiper, SwiperItem} from 'vux'
	const list = () => ['全部', '数码家电', '家居家装', '美妆个护', '鞋包配饰', '厨具用品', '男装', '女装']
		
	export default {
		components: {
      viHeader,
      Tab,
	    TabItem,
	    Swiper,
	    SwiperItem,
    },
    data:function(){
    	return {
    		headerData:'折扣爆料',
    		list2: list(),
    		index: 0,
    		current: '数码家电',
    		sHeight:'600px',
    		list: [
    			{
        		src: 'http://somedomain.somdomain/x.jpg',
        		fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        		title: '标题一',
        		desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道',
        		url: '/component/cell'
      		}, {
        		src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        		title: '标题二',
        		desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道',
        		url: {
          		path: '/component/radio',
          		replace: false
        		},
        		meta: {
          		source: '来源信息',
          		date: '时间',
          		other: '其他信息'
        		}
      		}]
		    		
    	}
    }
	}
</script>

<style lang="less">
	@import '~vux/src/styles/1px.less';
	@import '~vux/src/styles/center.less';
	
	.tabWarp{
		width: 100%;
		height: auto;
		overflow-x:auto ;
	}
	
	.tab{
		width: 60rem;
	}
	
	.tab-swiper {
	  background-color: #fff;
	  min-height: 10rem;
	}
	
	.discountCon{
		width:100%;
		height:150px;
		border-bottom: 0.1rem solid #f8f8f8;
		padding:15px;
		background: #fff;
	}
	
	.discountCon{
		img{
			width:130px;
			height: 130px;
		}
	}
	
	::-webkit-scrollbar  
	{  
    width:1rem;  
    height:0.1rem;  
    background-color: #F5F5F5;  
	}  
</style>
